<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/alerts2/css/icomoon.css"/>
    <link rel="stylesheet" href="/static/alerts2/css/index.css"/>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!--    <script src="/static/alerts2/js/echarts.min.js"></script>-->
    <script src="/static/alerts2/js/flexible.js"></script>
    <script src="/static/alerts2/js/jquery.min.js"></script>
</head>
<body>
<!--父容器大盒子-->
<div class="viewport">

    <div class="column">
        <h4 style="color:white">
            预警点
        </h4>
        <!-- 监控区域模块制作 -->

        <div class="panel monitor">
            <div class="inner">
                <div class="tabs">
                    <a href="javascript:;" class="active">娄底</a>
                    <a href="javascript:;">长沙</a>
                    <a href="javascript:;">邵阳</a>
                    <a href="javascript:;">益阳</a>
                    <a href="javascript:;">张家界</a>
                    <a href="javascript:;">湘西州</a>
                    <a href="javascript:;">常德</a>
                    <a href="javascript:;">株洲</a>
                </div>
                <div class="content" style="display: block;">
                    <div class="head">
                        <span class="col">项目</span>
                        <span class="col" style="color:red">红色预警</span>
                        <span class="col" style="color:orange">橙色预警</span>
                        <span class="col" style="color:yellow">黄色预警</span>
                        <span class="col">蓝色预警</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                {% for item in ld %}
                                    <span class="col">{{item|safe}}</span>
                                {% endfor %}
                                <span class="icon-dot"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content">
                    <div class="head">
                        <span class="col">项目</span>
                        <span class="col" style="color:red">红色预警</span>
                        <span class="col" style="color:orange">橙色预警</span>
                        <span class="col" style="color:yellow">黄色预警</span>
                        <span class="col">蓝色预警</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                {% for item in css %}
                                    <span class="col">{{item|safe}}</span>
                                {% endfor %}
                                <span class="icon-dot"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content">
                    <div class="head">
                        <span class="col">项目</span>
                        <span class="col" style="color:red">红色预警</span>
                        <span class="col" style="color:orange">橙色预警</span>
                        <span class="col" style="color:yellow">黄色预警</span>
                        <span class="col">蓝色预警</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                {% for item in sys %}
                                    <span class="col">{{item|safe}}</span>
                                {% endfor %}
                                <span class="icon-dot"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content">
                    <div class="head">
                        <span class="col">项目</span>
                        <span class="col" style="color:red">红色预警</span>
                        <span class="col" style="color:orange">橙色预警</span>
                        <span class="col" style="color:yellow">黄色预警</span>
                        <span class="col">蓝色预警</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                {% for item in yys %}
                                    <span class="col">{{item|safe}}</span>
                                {% endfor %}
                                <span class="icon-dot"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content">
                    <div class="head">
                        <span class="col">项目</span>
                        <span class="col" style="color:red">红色预警</span>
                        <span class="col" style="color:orange">橙色预警</span>
                        <span class="col" style="color:yellow">黄色预警</span>
                        <span class="col">蓝色预警</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                {% for item in zjjs %}
                                    <span class="col">{{item|safe}}</span>
                                {% endfor %}
                                <span class="icon-dot"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content">
                    <div class="head">
                        <span class="col">项目</span>
                        <span class="col" style="color:red">红色预警</span>
                        <span class="col" style="color:orange">橙色预警</span>
                        <span class="col" style="color:yellow">黄色预警</span>
                        <span class="col">蓝色预警</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                {% for item in xxz %}
                                    <span class="col">{{item|safe}}</span>
                                {% endfor %}
                                <span class="icon-dot"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content">
                    <div class="head">
                        <span class="col">项目</span>
                        <span class="col" style="color:red">红色预警</span>
                        <span class="col" style="color:orange">橙色预警</span>
                        <span class="col" style="color:yellow">黄色预警</span>
                        <span class="col">蓝色预警</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                {% for item in cds %}
                                    <span class="col">{{item|safe}}</span>
                                {% endfor %}
                                <span class="icon-dot"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content">
                    <div class="head">
                        <span class="col">项目</span>
                        <span class="col" style="color:red">红色预警</span>
                        <span class="col" style="color:orange">橙色预警</span>
                        <span class="col" style="color:yellow">黄色预警</span>
                        <span class="col">蓝色预警</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                {% for item in zzs %}
                                    <span class="col">{{item|safe}}</span>
                                {% endfor %}
                                <span class="icon-dot"></span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="column">
        <!-- 地图 -->
        <div class="xxx">
            <h3>
                <span class="icon-cube"></span>
                预警数
            </h3>
            <div class="chart">
                <div class="alerts_bar"></div>
<!--                <div class="geo"></div>-->
            </div>
        </div>
    </div>
<!--    <div class="column">-->
<!--        &lt;!&ndash; 订单 &ndash;&gt;-->
<!--        <div class="order panel">-->
<!--            <div class="inner">-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
</div>
<script src="/static/alerts2/js/index.js"></script>
<!-- 想使用中国地图必须先引用这个china.js文件 -->
<script src="/static/alerts2/js/china.js"></script>
<!-- 引入我们自己的地图js文件 -->
<!--<script src="/static/alerts2/js/map.js"></script>-->
<script>
    $(
        function () {
            fetchData();
        }
    );

    function fetchData() {
        $.ajax({
            type: "GET",
            url: "http://192.168.1.105:8888/api/v1/list_alerts2/",
            dataType: 'json',
            success: function (res) {
                var alerts = res.data
                console.log('fetchData111',alerts);
                var myChart = echarts.init(document.querySelector(".alerts_bar"));
                    var option = {
        color:['#D3656A','#EFA366','#FDDD57','#001D47'],
<!--        #BD798E红 #740cf蓝-->
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['红色预警', '橙色预警', '黄色预警', '蓝色预警']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['娄底', '长沙', '邵阳', '益阳','张家界','湘西州','常德','株洲']
        },
        series: [
            {
                name: '红色预警',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: alerts.red
            },
            {
                name: '橙色预警',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: alerts.orange
            },
            {
                name: '黄色预警',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: alerts.yellow
            },
            {
                name: '蓝色预警',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: alerts.blue
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize()
    })
            }
        });
    }
</script>
</body>
</html>